<template>
	<view class="list_box">
		<view class="list_item" v-for="(item,index) in dataList" :key="index">
			<view class="row_item">
				<view class="label">家长姓名：</view>
				<view class="val">{{item.parent}}</view>
			</view>
			<view class="row_item">
				<view class="label">孩子姓名：</view>
				<view class="val">{{item.name}}</view>
			</view>
			<view class="row_item">
				<view class="label">联系电话：</view>
				<view class="val">{{item.phone}}</view>
			</view>
			<view class="row_item">
				<view class="label">所属班级：</view>
				<view class="val">{{item.student_class}}</view>
			</view>
			<view class="btn">
				<view class="btn_t" @click="toScore(item)">查看评分</view>
			</view>
		</view>
		<sww-load-more :params="{ ...dataListParams }"></sww-load-more>

	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js'
	export default {
		mixins: [pagingMixin],
		props: {
			infoId: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				this._init_data('GetEnrollUsersList', {
					pk_id: this.infoId
				})
			},
			onReachBottom() {
				this._load_data()
			},
			toScore(item) {
				this.$linkTo(`/package/enroll/user/score/scoreList?enroll_user_id=${item.pk_id}&infoId=${this.infoId}`)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.list_box {
		.list_item {
			background-color: #fff;
			margin: 20rpx 20rpx;
			border-radius: 10rpx;
			padding: 10rpx 20rpx;
			display: flex;
			flex-wrap: wrap;

			.row_item {
				padding: 6rpx 0;
				font-size: 24rpx;
				width: 50%;
				display: flex;

				.val {
					flex: 1;
					overflow: hidden;
					color: #999;

					&.act {
						color: #2440C4;

						&:active {
							text-decoration: underline;
						}
					}
				}

			}

			.btn {
				font-size: 24rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				margin: 16rpx 0 6rpx;
				width: 100%;

				.btn_t {
					color: #1890FF;
					padding: 4rpx 10rpx;
					border: 1rpx solid #1890FF;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
